<template>
  <aside class="left-menu"  >
    <div class="logo-con">
      <img src="/images/logo.png" alt="">
    </div>

    <nav class="navigation">
        <ul class="sidebar-menu" id="left-menu">
          <li class="menu-item" v-for="(menu,idx) in menuList" :key="menu.id" :class="{active : menu.active,open : menu.open}">
            <a href="javascript:void(0);" class="parent-a" @click="clickMenu(menu)">
              <i class="fa" :class="menu.icon"></i><span>{{menu.name}}</span>
              <em class="el-icon-arrow-right" v-if="menu.children.length > 0"></em>
            </a>

            <ul class="sub-menu" :style="{height : (menu.open ? menu.children.length *30 + 'px' : 0)}"  v-if="menu.children.length > 0">
             <li class="sub-item" v-for="(subMenu,index) in menu.children" :key="subMenu.id" :class="{active : subMenu.active}">
               <a href="javascript:void(0);" @click.stop="clickSubMenu(subMenu,index,idx)"  >{{subMenu.name}}</a>
             </li>
            </ul>
          </li>
        </ul>
    </nav>
  </aside>
</template>

<script>
import Menu from '@/api/menu'
// import { mapState } from 'vuex'
export default {
  name: "LeftMenu",
  data() {
    return {
      menuList: []
    };
  },

  components: {},

  computed: {
    // ...mapState(['loginUser'])
  },

  methods: {
    clickMenu(menu) {
      if (menu.children.length == 0) {
        this.menuList.forEach(item => {
          item.active = false;
          item.open = false;
          
          item.children.forEach(child =>{
            child.active = false;
          })
        });
        menu.active = true;
        //open link
        this.$router.push(menu.link);
      } else {
        if (menu.open) {
          menu.open = false;
        } else {
          this.menuList.forEach(item => {
            item.open = false;
          });
          menu.open = true;
        }
      }
    },
    clickSubMenu(menu, idx, p_idx) {
      if (!menu.active) {
        this.menuList.forEach(menu => {
          menu.active = false;
          menu.children.forEach(child => {
            child.active = false;
          });
        });
        this.menuList[p_idx].active = true;
        menu.active = true;

        //open link
        this.$router.push(menu.link);
      }
    }
  },

  mounted() {

    Menu.getLoginMenu().then(data => {

      if (data && data.length > 0) {
        var list = {};
        data.forEach(elem => {
          if (elem.parent == 0 && !list["menu_" + elem.id]) {
            elem.children = [];
            elem.open = false;
            elem.active = false;
            list["menu_" + elem.id] = elem;
          } else {
            elem.active = false;
            list["menu_" + elem.parent].children.push(elem);
          }
        });

        Object.keys(list).forEach(key => this.menuList.push(list[key]));
        this.menuList.sort((a, b) => {
          return a.order - b.order;
        });


        //page refresh
        var _path = this.$route.path;
        if (!_path || _path == "/") {
          if (this.menuList.length > 0) {
            var _default = this.menuList[0];
            _default.active = true;

            if (_default.children.length > 0) {
              _default.open = true;
              _default.children[0].active = true;
              // 默认第一个子菜单跳转
              this.$router.push(_default.children[0].link);
            } else {
              //默认无菜单跳转
              this.$router.push(_default.link);
            }
          }
        } else {
          // 根据route path匹配
          this.menuList.every(menu => {
            if(menu.link == _path){
              menu.active = true;
              return false;
            }

            menu.children.every(sub => {
              if(sub.link == _path){
                menu.open = true;
                menu.active = true;
                sub.active = true;
                return false;
              }
              return true;
            })
            return true;
          })


        }
      }
    });
  }
}

</script>
<style rel="stylesheet/less" lang="less" scoped>
@color-active : #ff404b;

.left-menu {
  width: 100%;
  height: 100%;
  background-color: #2b2f3e;
  padding: 25px 0;
  box-shadow: inset -5px 0 8px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
  box-sizing: border-box;

  .logo-con{
    padding: 0 40px;

    img{
      width: 100%;
    }
  }

  .navigation {
    margin: 40px 0 20px;
  }

  ul,
  li {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    box-sizing: border-box;
    width: 100%;
  }


  .sub-menu{
    transition:height .5s linear
  }

  .menu-item {
    border-bottom: 1px solid #2f3444;
    font-size: 14px;
    overflow: hidden;

    &.open {
      em {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
      }
    }

    a {
      display: inline-block;
      width: 100%;
      color: #7a7e8a;
      text-decoration: none;
    }

    &.active {
      & > a {
        background: @color-active;
        color: #fff;
      }
    }

    &:hover {
      & > a {
        background: @color-active;
        color: #fff;
      }
    }

    & > a {
      padding: 0 16px;
      line-height: 40px;
      text-transform: uppercase;
      font-weight: bold;
      position: relative;
      box-sizing: border-box;

      

      i {
        margin: 0 5px;
        display: inline-block;
        width: 14px;
        height: 14px;
        background-repeat: no-repeat;
        background-size: 100% auto;
      }

      em {
        position: absolute;
        right: 10px;
        top: 15px;
        -webkit-transition: transform 0.5s linear;
        transition: transform 0.5s linear;
      }
    }
  }

  .sub-item {
    &.active {
      a {
        color: #fff;
      }

      &:before {
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        height: 100%;
        width: 5px;
        background: #5e6271;
      }
    }

    a {
      padding: 0 30px;
      line-height: 30px;
      font-size: 14px;
      -webkit-transition: all 0.5s linear;
      transition: all 0.5s linear;

      &:hover {
        padding-left: 34px;
        color: #fff;

        &:before {
          position: absolute;
          content: "";
          left: 0;
          top: 0;
          height: 100%;
          width: 5px;
          background: #5e6271;
        }
      }
    }
  }
}
</style>
